<template>
  <div>
    <vxe-table
      border
      height="600px"
      highlight-hover-row
      highlight-hover-column
      align="center"
      :loading="tableLoading"
      :auto-resize="true"
      :data="rulesData"
      :span-method="mergeRowMethod"
    >
      <vxe-table-column
        type="seq"
        title="序号"
        width="60"
        align="center"
      ></vxe-table-column>
      <vxe-table-column
        field="tableName"
        title="表名称"
        align="center"
      ></vxe-table-column>
      <vxe-table-column
        field="itemName"
        title="字段名称"
        align="center"
      ></vxe-table-column>
      <vxe-table-column
        field="ruleName"
        title="方法名称"
        align="center"
      ></vxe-table-column>
      <vxe-table-column field="verifyType" title="校验方式" align="center">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.verifyType === '0'"
            >错误</el-tag
          >
          <el-tag type="warning" v-else>警告</el-tag>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
  
  <script>
import XEUtils from "xe-utils";
export default {
  data() {
    return {
      tableLoading: false,
      rulesData: [
        {
          tableName: "济南",
          itemName: "名称",
          ruleName: "方法",
          verifyType: "0",
        },
        {
          tableName: "济南",
          itemName: "名称",
          ruleName: "方法",
          verifyType: "1",
        },
        {
          tableName: "济南",
          itemName: "简历",
          ruleName: "方法",
          verifyType: "0",
        },
        {
          tableName: "济南",
          itemName: "简历",
          ruleName: "方法",
          verifyType: "0",
        },
      ],
    };
  },
  created() {},
  methods: {
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = ["itemName"];
      const cellValue = XEUtils.get(row, column.property);
      console.log(cellValue,"cellValue");
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (
            nextRow &&
            XEUtils.get(nextRow, column.property) === cellValue
          ) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
  },
};
</script>
  
  <style>
</style>